<template>
  <!-- 任务管理详情页 -->
  <div class="box">
    <div class="details_top clearfix">
      <span
        class="left"
        v-if="name.length<3"
      > {{((name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
      <span
        class="left"
        v-else-if="name.length>=3"
      > {{((name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
      <ul class="left">
        <li>{{TaskSubject.create_name}}</li>
        <li>{{TaskSubject.create_time}}</li>
        <li>{{TaskSubject.task_title}}</li>
      </ul>
    </div>
    <p class="details_content">{{TaskSubject.task_desc}}</p>
    <div v-if="type==1">
      <div
        style="position:absolute;top:0px;right:10px"
        v-for="(it,p) in img"
        :key="p"
      >
        <img
          v-if="it.i==status"
          height="150px"
          :src="it.url"
        >
      </div>
    </div>
    <!-- 列表 -->
    <div class="details_list">
      <ul>
        <li><span>任务类型</span><span v-if='TaskSubject.is_recruit==1'>指派任务</span></li>
        <li><span>负责人</span><span style="width:200px;display: inline-block;word-break: break-word;">{{TaskSubject.head}}</span></li>
        <li><span>开始时间</span><span>{{TaskSubject.start_time}}</span></li>
        <li><span>结束时间</span><span>{{TaskSubject.end_time}}</span></li>
        <li><span>完成得分</span><span>{{D_name}}:{{TaskSubject.complete_code_d}}</span><span
            style="margin-left:10px"
            v-if='TaskSubject.complete_code_c!=0 && ISC == 1'
          >{{C_name}}:{{TaskSubject.complete_code_c}}</span></li>
        <li><span>逾期扣分</span><span>{{D_name}}:{{TaskSubject.overtime_code_d}}/天</span><span
            style="margin-left:10px"
            v-if='TaskSubject.overtime_code_c!=0 && ISC == 1'
          >{{C_name}}:{{TaskSubject.overtime_code_c}}/天</span></li>
        <li><span>逾期上限</span><span>{{TaskSubject.overtime_end_day}}天</span></li>
        <li v-if='TaskSubject.check_name!=undefined'><span>验收人</span><span>{{TaskSubject.check_name}}</span></li>
      </ul>
    </div>
    <van-image-preview
      v-if='images.length!=0'
      v-model="show"
      :images="images"
      @change="onChange"
    >
      <template v-slot:index>{{index+1}}/{{images.length}}</template>
    </van-image-preview>

    <!-- <van-uploader
      v-model="imgurl"
      multiple
      :max-count="2"
    /> -->
    <div
      class="details_list"
      style="border-bottom:1px solid silver"
      v-if="images.length!=0"
    >
      <span style="display: inline-block;width: 120px;">图片</span><span
        v-for="(img , s) in images"
        :key="s"
        style="display:inlin-block"
      ><img
          @click="show_file(img)"
          style="height:80px;margin-right:5px;vertical-align:middle"
          :src="img"
        ></span>
    </div>
    <!-- 附件 -->
    <!-- <div
      class="details_list"
      style="border-bottom:1px solid silver"
      v-if="file.length!=0"
    >
      <span style="display: inline-block;width: 120px;">附件</span><span
        v-for="(f , l) in file"
        :key="l"
        style="display:inlin-block"
      ><img
          @click="show_files(f)"
          style="height:80px;margin-right:5px;vertical-align:middle"
          :src="f"
        ></span>
    </div> -->
    <div
      class="details_list"
      style="border-bottom:1px solid #c0c0c04d"
      v-if="file.length!=0"
    >
      <span style="display: inline-block;width: 120px;">附件</span><span
        v-for="(f , l) in file"
        :key="l"
        style="display:inline-block"
      >
        <span style="padding:8px;line-height:80px;height:80px;display:inline-block;border:1px solid #c0c0c04d">
          <a :href="f">
            附件下载
          </a>
        </span>
      </span>
    </div>
    <div
      v-if="type==1"
      style="text-align:right;padding:30px 20px 10px;background:#fff;border-bottom:1px solid silver"
      @click="show_click"
    >
      <van-icon
        :style="{fontSize:'32px'}"
        name="comment-circle-o"
      />
    </div>
    <van-row
      v-if="status!=0&&type!=1&&type!=2&&type!=3"
      :style="{background:'#fff',padding:'15px 15px',marginTop:'10px'}"
    >
      <p>发送至群聊</p>
      <div style="margin-left:20px">
        <span
          v-for="(tt,p) in tag_list"
          :key="p+'i'"
          style="margin:5px;display:inline-block"
        >
          <van-tag
            closeable
            size="medium"
            type="primary"
            @close="close(p)"
          >
            {{tt.title}}
          </van-tag>
        </span>
        <div>
          <van-icon
            name="add-o"
            @click="show_jsapi"
          />
          <p
            style="font-size:14px;"
            @click="show_jsapi"
          >添加</p>
        </div>
      </div>

    </van-row>
    <van-row
      v-if="type==3 && status==0"
      :style="{background:'#fff',padding:'15px 5px',borderTop:'1px solid #c0c0c06b',borderBottom:'1px solid #c0c0c06b'}"
    >
      <van-field
        v-model="message"
        rows="4"
        autosize
        label="审核意见"
        type="textarea"
        placeholder="请输入审批意见"
      />
    </van-row>
    <div v-if="type==3 && status==0">
      <van-button
        :style="{width:'45%',height:'5.5vh',lineHeight:'5.5vh',marginTop:'10px'}"
        plain
        color="#3C9BFB"
        @click="showReject()"
      >驳回</van-button>
      <van-button
        color="#3C9BFB"
        :style="{width:'45%',height:'5.5vh',lineHeight:'5.5vh',marginTop:'10px'}"
        @click="showAgree()"
      >同意</van-button>
    </div>
    <!-- 评论内容 -->
    <p v-show='checked_time'>暂无评论
      <p />
      <van-dialog
        v-model="show_dialog"
        title="标题"
        show-cancel-button
        @confirm='showConfirm'
      >
        <van-field
          v-model="field_value"
          placeholder="请输入评论内容"
          :style="{fontSize:'16px',textAlign:'center'}"
        />
      </van-dialog>
      <div v-if='type==1'>
        <div
          class="details_comment"
          v-for="(ol ,y) in comment_list"
          :key="y+'ol'"
        >
          <div class="details_comment_title clearfix">
            <span
              class="left"
              v-if="ol.user_avatar!=null&&ol.user_avatar!=''"
            ><img
                style="width:100%;height:100%;border-radius:20px"
                :src="ol.user_avatar"
              ></span>
            <span
              class="left"
              v-else-if="ol.user_name.length<3"
            >{{((ol.user_name.split("").reverse().join("")).substring(0,1)).split("").reverse().join("")}}</span>
            <span
              class="left"
              v-else-if="ol.user_name.length>=3"
            > {{((ol.user_name.split("").reverse().join("")).substring(0,2)).split("").reverse().join("")}}</span>
            <ul class="left">
              <li>{{ol.user_name}}</li>
              <li>{{ol.create_time | dateFrm}}</li>
            </ul>
          </div>
          <p>{{ol.comment_desc}}</p>
        </div>
      </div>
  </div>

</template>

<script type="text/javascript">
import moment from "moment";
import "moment/locale/zh-cn";
import { Icon, Row, Button, Field, Tag, Dialog } from "vant";
export default {
  data() {
    return {
      checked_time: false,
      show_dialog: false,
      field_value: "",
      TaskSubject: [],
      SubTask: [],
      images: [],
      file: [],
      type: 0,
      show: false,
      message: "",
      status: 0,
      cId: "",
      img: [
        {
          url:
            "",
          i: 4
        },
        {
          url:
            "",
          i: 0
        },
        {
          url:
            "",
          i: 1
        },
        {
          url:
            "",
          i: 7
        }
      ],
      C_name: "C分",
      D_name: "D分",
      Group_chat: "",
      primary_tag: true,
      tag_list: [],
      comment_list: [],
      index: 0,
      name: "",
      ISC: ""
    };
  },
  filters: {
    dateFrm: function(el) {
      return moment(el, "YYYY-MM-DD HH:mm:ss").fromNow();
    }
  },
  created() {
    this.status = this.$route.query.status;
    this.type = this.$route.query.type;
    this.getUserId();
    dd.biz.navigation.setTitle({
      title: "详情" //控制标题文本，空字符串表示显示默认文本
    });
  },
  beforeUpdate() {
    this.C_name = localStorage.getItem("c_name");
    this.D_name = localStorage.getItem("d_name");
  },
  methods: {
    //C分开关
    async getIsC() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(`yuepoints/getIsC?corpId=${corpId}`);
      // localStorage.setItem("ISC", res.data.data.is_c_code);
      this.ISC = res.data.data.is_c_code;
    },
    // 钉钉鉴权
    async show_js_api() {
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      let url = location.href.split("#")[0];
      const res = await this.$http.get(
        `dingapi/getJsapiConfig?corpId=${corpId}&url=${url}`
      );
      let config = res.data.data;
      localStorage.setItem("appId", config.agentId);
      dd.config({
        agentId: config.agentId,
        corpId: config.corpId,
        timeStamp: config.timeStamp,
        nonceStr: config.nonceStr,
        signature: config.signature,
        jsApiList: [
          "runtime.info",
          "biz.ding.post",
          "biz.ding.create",
          "biz.chat.pickConversation",
          "device.notification.prompt",
          "device.notification.confirm",
          "device.notification.alert",
          "biz.navigation.setRight",
          "biz.chat.open",
          "biz.util.open",
          "biz.util.openLink",
          "biz.user.get",
          "biz.contact.choose",
          "biz.telephone.call",
          "biz.util.uploadImage",
          // "device.accelerometer.watchShake",
          // "biz.map.locate",
          // "device.geolocation.get",
          "biz.customContact.choose",
          "biz.contact.complexPicker",
          "biz.contact.departmentsPicker"
        ]
      });
    },
    // 自定义名称存储
    async getCustomName() {
      let corpId = localStorage.getItem("custid");
      const res = await this.$http.get(
        `yuepoints/getCustomName?corpId=${corpId}`
      );
      if (res.data.errcode == "0000") {
        if (res.data.data.c_name == "") {
          localStorage.setItem("c_name", "C分");
        } else {
          localStorage.setItem("c_name", res.data.data.c_name);
        }
        if (res.data.data.d_name == "") {
          localStorage.setItem("d_name", "D分");
        } else {
          localStorage.setItem("d_name", res.data.data.d_name);
        }
      } else {
        localStorage.setItem("c_name", "C分");
        localStorage.setItem("d_name", "D分");
      }
    },
    //鉴权
    async getUserId() {
      let Corp_Id = localStorage.getItem("custid");
      let User_Id = localStorage.getItem("userId");
      let corpId = this.$utils.getUrlKey("custid");
      if (corpId == null || corpId == "undefined") {
        corpId = Corp_Id;
      } else {
        localStorage.setItem("custid", corpId);
      }
      var _this = this;
      let code = "";
      if (User_Id && User_Id != "undefined" && User_Id != null) {
        if (Corp_Id != corpId) {
          await dd.runtime.permission.requestAuthCode({
            corpId: corpId,
            onSuccess: function(result) {
              code = result.code;
            },
            onFail: function(err) {}
          });
          _this.$http
            .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
            .then(res => {
              localStorage.setItem("userId", res.data.data.dd_id);
              localStorage.setItem("custid", corpId);
              _this.getCustomName();
              _this.taskHallInfo();
              _this.show_js_api();
              _this.getIsC();
            });
        } else {
          _this.taskHallInfo();
          _this.show_js_api();
          _this.getIsC();
        }
      } else {
        await dd.runtime.permission.requestAuthCode({
          corpId: corpId,
          onSuccess: function(result) {
            code = result.code;
          },
          onFail: function(err) {}
        });
        _this.$http
          .get(`dingapi/signIn?corpId=${corpId}&code=${code}`)
          .then(res => {
            localStorage.setItem("userId", res.data.data.dd_id);
            localStorage.setItem("custid", corpId);
            _this.getCustomName();
            _this.taskHallInfo();
            _this.show_js_api();
            _this.getIsC();
          });
      }
    },
    show_click() {
      this.show_dialog = true;
      this.field_value = "";
    },
    // 任务评论
    async showConfirm() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const id = this.$route.query.id;
      const res = await this.$http.get(
        `yuepoints/comment?corpId=${corpId}&userId=${userId}&id=${id}&content=${this.field_value}`
      );
      if (res.data.errcode == "0000") {
        this.comment_list.push(res.data.data);
      }
    },
    // 驳回
    async showReject() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const id = this.$route.query.id;
      const res = await this.$http.get(
        `yuepoints/Task/Toexamine?corpId=${corpId}&userId=${userId}&tId=${id}&status=1&desc=${this.message}&cid=${this.cId}`
      );
      if (res.data.errcode == "0000") {
        this.$router.push({
          path: "/task"
        });
      }
    },
    // 同意
    async showAgree() {
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      // let corpId = this.$utils.getUrlKey("custid");
      const id = this.$route.query.id;
      // console
      const res = await this.$http.get(
        `yuepoints/Task/Toexamine?corpId=${corpId}&userId=${userId}&tId=${id}&status=4&desc=${this.message}&cid=${this.cId}`
      );
      if (res.data.errcode == "0000") {
        this.$router.push({
          path: "/task"
        });
      }
    },
    show_file(img) {
      this.show = true;
    },
    onChange(index) {
      this.index = index;
    },
    async taskHallInfo() {
      const id = this.$route.query.id;
      const type = this.$route.query.type;
      let userId = localStorage.getItem("userId");
      let corpId = localStorage.getItem("custid");
      if (userId == null || userId == "undefined") {
        // Toast("请在钉钉工作台悦积分入口进入查看");
        this.$router.replace("/error");
        return false;
      }
      // let corpId = this.$utils.getUrlKey("custid");
      this.type = type;
      let res;
      if (type == 1) {
        res = await this.$http.get(
          `yuepoints/taskHallInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      } else if (type == 2) {
        res = await this.$http.get(
          `yuepoints/iReleasedInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      } else if (type == 3) {
        res = await this.$http.get(
          `yuepoints/myAuditInfo?corpId=${corpId}&userId=${userId}&id=${id}`
        );
      }

      const { TaskSubject, SubTask, comment } = res.data.data;
      if (comment != undefined) {
        this.comment_list = comment;
        this.checked_time = true;
      }
      this.TaskSubject = TaskSubject;
      this.name = this.TaskSubject.create_name;
      this.SubTask = SubTask;
      if (!this.isEmpty(TaskSubject.img_url)) {
        if (TaskSubject.img_url.indexOf(",") > -1) {
          this.images = TaskSubject.img_url.split(",").reverse();
        } else {
          if (TaskSubject.img_url != "") this.images.push(TaskSubject.img_url);
        }
      }
      if (!this.isEmpty(TaskSubject.file_url)) {
        if (TaskSubject.file_url.indexOf(",") > -1) {
          this.file = TaskSubject.file_url
            .split(",")
            .reverse()
            .splice(1)
            .reverse();
        } else {
          this.file.push(TaskSubject.file_url);
        }
      }
    },
    isEmpty(obj) {
      if (typeof obj == "undefined" || obj == null || obj == "") {
        return true;
      } else {
        return false;
      }
    }
  },
  components: {
    [Icon.name]: Icon,
    [Row.name]: Row,
    [Button.name]: Button,
    [Field.name]: Field,
    [Tag.name]: Tag,
    [Dialog.Component.name]: Dialog.Component
  }
};
</script>

<style lang="less" scoped>
.box {
  font-size: 15px;
  padding-bottom: 55px;
  /deep/ .van-icon-add-o {
    font-size: 22px;
    color: dodgerblue;
    margin-top: 20px;
  }
  /deep/ .van-row {
    padding: 0px 15px;
    text-align: left;
  }
  /deep/ .van-button--large {
    width: 48%;
    height: 40px;
    line-height: 40px;
  }
  /deep/.van-cell{
    padding:10px 15px 10px 25px;
  }
  /deep/.van-field__label{
    width:120px;
  }
  .details_top {
    position: relative;
    text-align: left;
    padding: 30px 30px 10px;
    background: #fff;
    span {
      display: inline-block;
      width: 50px;
      height: 50px;
      border-radius: 50%;
      text-align: center;
      line-height: 50px;
      background-color: #59d1ff;
      color: #fff;
    }
    ul {
      margin-left: 10px;
      background: #fff;
    }
    li:nth-child(2) {
      font-size: 12px;
      color: #aba7a7f7;
    }
    li:nth-child(3) {
      font-size: 16px;
      margin-top: 5px;
    }
  }
  .details_content {
    margin: 0px;
    text-align: left;
    padding: 10px 30px;
    font-size: 14px;
    background: #fff;
  }
  .details_list {
    font-size: 16px;
    text-align: left;
    padding: 10px 20px 5px 30px;
    border-top: 1px solid #c0c0c04f;
    border-bottom: 1px solid #c0c0c04f;
    background: #fff;
    li {
      margin-bottom: 5px;
      span:nth-child(1) {
        display: inline-block;
        width: 120px;
      }
    }
  }
  .details_comment {
    margin: 10px 30px;
    .details_comment_title {
      span {
        font-size: 13px;
        display: inline-block;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        text-align: center;
        line-height: 40px;
        background-color: #59d1ff;
        color: #fff;
      }
      ul {
        margin-left: 10px;
      }
      li:nth-child(2) {
        font-size: 12px;
        color: silver;
      }
    }
    p {
      text-align: left;
    }
  }
}
.left {
  float: left;
}
.right {
  float: right;
}
.clearfix::after {
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.clearfix {
  zoom: 1;
}
</style>
